<!DOCTYPE html>

<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>剖析Event对象</title>

        <style type="text/css">
            .container {
                border: 1px solid blue ;
                margin: 15px ;
            }

            .container div {
                line-height: 36px ;
                border-bottom: 1px solid #dedede ;
            }
        </style>

    </head>
    <body>

        <div class="container first">
            <h3>Event</h3>
        </div>

        <div class="container second">
            <h3>Event.prototype</h3>
        </div>

        <script type="text/javascript">
            // 选择页面上 class 属性取值中 包含 first 的第一个元素
            let firstContainer = document.querySelector( '.first' );

            // Node 是属于 Web API 中的内容，通常由浏览器提供
            let names = Object.getOwnPropertyNames( Event );
            let f1 = function( e ){
                // 使用 documnet 提供的支持来创建一个新的 HTMLDivElement实例
                let d = document.createElement( 'div' ); 
                // 将 属性名称 作为 文本 设置到 div 元素中
                d.innerText = 'Event.' + e ;
                // 将新创建的 div 添加到 firstContainer 内部的末尾
                firstContainer.appendChild( d );
            }
            names.forEach( f1 );

            /* - - -  - - -  - - -  - - -  - - -  - - -  - - - */

            // 选择页面上 匹配于 .second 选择器 的第一个元素
            let secondContainer = document.querySelector( '.second' );

            let props = Object.getOwnPropertyNames( Event.prototype );
            let f2 = function( e ){
                // 使用 documnet 提供的支持来创建一个新的 HTMLDivElement实例
                let d = document.createElement( 'div' );
                // 将 属性名称 作为 文本 设置到 div 元素中
                d.innerText = 'Event.prototype.' + e ;
                // 将新创建的 div 添加到 secondContainer 内部的末尾
                secondContainer.appendChild( d );
            }

            props.forEach( f2 );

        </script>

    </body>
</html>